<template>
  <div>
    <tab :line-width=2 active-color='#fc378c' :index.sync="index">
      <tab-item class="vux-center" :selected="demo2 === item" v-for="item in list2" @click="demo2 = item">{{item}}</tab-item>
    </tab>
    <swiper :index.sync="index" height="100px" :show-dots="false">
<!--       <swiper-item v-for="item in list2">
        <div class="tab-swiper vux-center">{{item}} Container</div>
      </swiper-item> -->

      <swiper-item>
        <div class="tab-swiper vux-center">
          <div class="list">
            <div class="list-item img-txt-list-item">
              <div class="pull-left img-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1120153875,2188570386&fm=116&gp=0.jpg">
              </div>
              <div class="pull-right txt-item">
                <p class="item-title">出售925奔驰汽车喷头1</p>
                <p class="item-desc">工厂在江苏江阴文林，厂里现在大批量出售925奔驰汽车喷头</p>
                <div class="item-other">
                  <span class="address"><i class="iconfont">&#xe939;</i>江苏省-无锡市</span>
                  <span class="date">2016-11-16 09:10:12</span>
                  <!-- <span class="meta"><i class="iconfont">&#xe8e4;</i></span> -->
                </div>
              </div>
              <!-- 帖子类型 -->
              <i class="iconfont card-type card-type-jh">&#xe633;</i>
              <!-- 帖子类型 -->
            </div>   
          </div>       
        </div>
      </swiper-item>



      <swiper-item>
        <div class="tab-swiper vux-center">
          <div class="list">
            <div class="list-item img-txt-list-item">
              <div class="pull-left img-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1120153875,2188570386&fm=116&gp=0.jpg">
              </div>
              <div class="pull-right txt-item">
                <p class="item-title">出售925奔驰汽车喷头2</p>
                <p class="item-desc">工厂在江苏江阴文林，厂里现在大批量出售925奔驰汽车喷头</p>
                <div class="item-other">
                  <span class="address"><i class="iconfont">&#xe939;</i>江苏省-无锡市</span>
                  <span class="date">2016-11-16 09:10:12</span>
                  <!-- <span class="meta"><i class="iconfont">&#xe8e4;</i></span> -->
                </div>
              </div>
              <!-- 帖子类型 -->
              <i class="iconfont card-type card-type-jh">&#xe633;</i>
              <!-- 帖子类型 -->
            </div>   
          </div>       
        </div>
      </swiper-item>



      <swiper-item>
        <div class="tab-swiper vux-center">
          <div class="list">
            <div class="list-item img-txt-list-item">
              <div class="pull-left img-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1120153875,2188570386&fm=116&gp=0.jpg">
              </div>
              <div class="pull-right txt-item">
                <p class="item-title">出售925奔驰汽车喷头3</p>
                <p class="item-desc">工厂在江苏江阴文林，厂里现在大批量出售925奔驰汽车喷头</p>
                <div class="item-other">
                  <span class="address"><i class="iconfont">&#xe939;</i>江苏省-无锡市</span>
                  <span class="date">2016-11-16 09:10:12</span>
                  <!-- <span class="meta"><i class="iconfont">&#xe8e4;</i></span> -->
                </div>
              </div>
              <!-- 帖子类型 -->
              <i class="iconfont card-type card-type-jh">&#xe633;</i>
              <!-- 帖子类型 -->
            </div>   
          </div>       
        </div>
      </swiper-item>


      <swiper-item>
        <div class="tab-swiper vux-center">
          <div class="list">
            <div class="list-item img-txt-list-item">
              <div class="pull-left img-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1120153875,2188570386&fm=116&gp=0.jpg">
              </div>
              <div class="pull-right txt-item">
                <p class="item-title">出售925奔驰汽车喷头4</p>
                <p class="item-desc">工厂在江苏江阴文林，厂里现在大批量出售925奔驰汽车喷头</p>
                <div class="item-other">
                  <span class="address"><i class="iconfont">&#xe939;</i>江苏省-无锡市</span>
                  <span class="date">2016-11-16 09:10:12</span>
                  <!-- <span class="meta"><i class="iconfont">&#xe8e4;</i></span> -->
                </div>
              </div>
              <!-- 帖子类型 -->
              <i class="iconfont card-type card-type-jh">&#xe633;</i>
              <!-- 帖子类型 -->
            </div>   
          </div>       
        </div>
      </swiper-item>


      <swiper-item>
        <div class="tab-swiper vux-center">
          <div class="list">
            <div class="list-item img-txt-list-item">
              <div class="pull-left img-item">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1120153875,2188570386&fm=116&gp=0.jpg">
              </div>
              <div class="pull-right txt-item">
                <p class="item-title">出售925奔驰汽车喷头5</p>
                <p class="item-desc">工厂在江苏江阴文林，厂里现在大批量出售925奔驰汽车喷头</p>
                <div class="item-other">
                  <span class="address"><i class="iconfont">&#xe939;</i>江苏省-无锡市</span>
                  <span class="date">2016-11-16 09:10:12</span>
                  <!-- <span class="meta"><i class="iconfont">&#xe8e4;</i></span> -->
                </div>
              </div>
              <!-- 帖子类型 -->
              <i class="iconfont card-type card-type-jh">&#xe633;</i>
              <!-- 帖子类型 -->
            </div>   
          </div>       
        </div>
      </swiper-item>


    </swiper>
    
    <div style="display: none">
      <x-button @click="addTab" :disabled="list2.length === 5" type="primary">Add tab item</x-button>
      <x-button @click="removeTab" :disabled="list2.length <= 2" type="primary">Remove tab item</x-button>
      <x-button @click="next" type="primary">Active next current: {{index}}</x-button>
      <x-button @click="prev" type="primary">Active prev current: {{index}}</x-button>
    </div>

    <bottom-tabbar></bottom-tabbar>
  </div>
</template>

<script>
import { Tab, TabItem,Swiper, SwiperItem,Divider,XButton} from 'vux';
import BottomTabbar from 'components/tabbar';

const list = () => ['精选', '美食', '电影', '酒店', '外卖']
export default {
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Divider,
    XButton,
    BottomTabbar
  },
  data () {
    return {
      list2: list(),
      demo2: '美食',
      index: 0
    }
  },
  methods: {
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1)
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        this.list2 = list().slice(0, this.list2.length - 1)
      }
    },
    next () {
      if (this.index === this.list2.length - 1) {
        this.index = 0
      } else {
        ++this.index
      }
    },
    prev () {
      if (this.index === 0) {
        this.index = this.list2.length - 1
      } else {
        --this.index
      }
    }
  }
}
</script>

<style lang="less">
@import "~vux/dist/styles/1px.css";
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
</style>